Spray painting trials

Before learning how to spray paint in reality I have looked into different ideas that people from around the world are using to simulate a spray paint effect in Flash. There are a number of people that show their ideas and post their code for anyone to use, and this has been very helpful.

The most predominant method of creating a simulated spray painting effect is to draw a circle on the screen that has a number of dots inside it. After drawing the dots a blur effect is added to smooth things out a bit.
i have a good idea i not says in this lenguague I HATEEEEEEEEEEEEEEEEE YOUUUUUUUUUUUUU GUYYYYYYYYYYYYYYYS PLAYNG THE GAMEEEEEEEEEEE


The application works really well - even holding the spray can in one spot causes the paint to pool and then run, perfect! When drawing at any speed the line is unbroken and it looks similar to what I think spray painting should look like (I will learn more about what spray painting looks like when we go for our lesson).

After using Freedraw for a while I realised that it wasn't doing a beautifully efficient programmed version of the "blurred, twisting circle" it was just a large, blurred line.

Well that's easy! I thought...

Flash Player 7 does not support ActionScript 3. This is the latest version of ActionScript and it is quite powerful and would be the perfect choice to write this application. Unfortunately it is necessary to use Actionscript 2 as this was made available on the release of Flash Player 7, the player available on the Wii.

Here is the code that was used to create the "blurred line" spray effect in ActionScript 2.

this.createEmptyMovieClip("draw_mc", 1);
 
import flash.filters.BlurFilter;
var blurX:Number = 10;
var blurY:Number = 10;
var quality:Number = 3;
var filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
var filterArray:Array = new Array();
filterArray.push(filter);
 
var fanSize = 40
_root.onMouseDown = function(){
this.onEnterFrame = function(){
with (draw_mc) {
lineStyle(fanSize, 0x333333, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
filters = filterArray;
}
}
this.onMouseUp = function(){
this.onEnterFrame = null
}
}
 

And here is the result:



It works? Well it does if you publish the Flash file to work with Flash Player 8 and above. Unfortunately, Flash Player 7 does not understand what a blur filter is.

So, what next?

After thinking about it, a blur is really just a number of lines overlapping a bit with darker lines in the center, so why not just draw a series of lines that overlap like this:

Here is the code, in ActionScript 2 that works in Flash Player 7, though again unfortunately, it starts to run slowly after a while and it becomes noticeably ... blocky. There is some room for improvement (though a number of other things will need to happen at the same time as well as just this code, ie timers to trigger paint runs etc). Adjusting the frame rate higher makes the line smoother but it locks up quicker, here is the first attempt:

for(var i=1; i<=12; i++){
this.createEmptyMovieClip("draw_mc"+i, i);
}
var fanSize = 40
var decrementValue =2
_root.onMouseDown = function(){
this.onEnterFrame = function(){
with (draw_mc1) {
lineStyle(fanSize, 0xEEEEEE, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc2) {
lineStyle(fanSize-(decrementValue), 0xDDDDDD, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc3) {
lineStyle(fanSize-(decrementValue*2), 0xCCCCCC, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc4) {
lineStyle(fanSize-(decrementValue*3), 0xBBBBBB, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc5) {
lineStyle(fanSize-(decrementValue*4), 0xAAAAAA, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc6) {
lineStyle(fanSize-(decrementValue*5), 0x999999, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc7) {
lineStyle(fanSize-(decrementValue*6), 0x888888, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc8) {
lineStyle(fanSize-(decrementValue*7), 0x777777, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc9) {
lineStyle(fanSize-(decrementValue*8), 0x666666, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc10) {
lineStyle(fanSize-(decrementValue*9), 0x555555, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc11) {
lineStyle(fanSize-(decrementValue*10), 0x444444, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
with (draw_mc12) {
lineStyle(fanSize-(decrementValue*11), 0x333333, 100);
curveTo(this._xmouse, this._ymouse, this._xmouse, this._ymouse);
}
}
this.onMouseUp = function(){
this.onEnterFrame = null
}
}
 

And here is the result, much blockier than the first result above that I think is on a par with the Freedraw site.



It was starting to become clear that we weren't going to be able to produce a nice spray painting effect in Flash PlOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOIIIIO